<template>
  <div>
    <CloudSelect
      v-model="value1"
      :options="options"
      default-value="lucy"
      style="width: 120px"
      @change="handleChange"
    >
    </CloudSelect>
    <CloudSelect
      v-model="value2"
      :options="options"
      default-value="lucy"
      style="width: 120px"
      disabled
    >
    </CloudSelect>
    <CloudSelect
      v-model="value3"
      :options="options"
      default-value="lucy"
      style="width: 120px"
      loading
    >
    </CloudSelect>
  </div>
</template>
<script>
export default {
  title: '5.loading',
  data() {
    return {
      options: [{
        title: 'jack',
        text: 'jack',
        value: 'jack'
      }, {
        title: 'lucy',
        text: 'lucy',
        value: 'lucy'
      }, {
        title: 'Yiminghe',
        text: 'Yiminghe',
        value: 'Yiminghe'
      }, {
        title: 'disabled',
        text: 'disabled',
        value: 'disabled'
      }],
      value1: '',
      value2: '',
      value3: ''
    }
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>